<template>
	<div class="w-page">
		<!-- 头部 -->
		<Header navNum="1"></Header>
		<!-- 内容 -->
		<div class="w-loginbox">
			<div class="w-width2">
				<div class="w-con" v-if="tab==1">
					<h3 class="w-welcome">欢迎注册</h3>
					<div class="w-rightbox">
						<form action="form_action.asp" method="get">
							<ul>
								<li>
									<div class="inputbox flex hs vc">
										<p class="shrink0">姓名</p>
										<input type="text" placeholder='请输入姓名' v-model="registeredUser.nickname">
									</div>
								</li>
								<li>
									<div class="inputbox flex hs vc">
										<p class="shrink0">身份</p>
										<input type="text" placeholder='请输入身份' v-model="registeredUser.position">
									</div>
								</li>
								<li>
									<div class="inputbox flex hs vc">
										<p class="shrink0">单位名称</p>
										<input type="text" placeholder='请输入单位名称' v-model="registeredUser.companyName">
									</div>
								</li>
								<li>
									<div class="inputbox flex hs vc">
										<p class="shrink0">设置密码</p>
										<input type="text"   placeholder="请设置密码" v-model="registeredUser.password">
									</div>
								</li>
								<li>
									<div class="inputbox flex hs vc">
										<p class="shrink0">联系方式</p>
										<input type="text" placeholder='请输入联系方式' v-model="registeredUser.mobileNumber">
									</div>
								</li>
							</ul>
							<div class="inputbox3 flex hs vc">
								<div class="rebtn" @click="registered">注 册</div>
							</div>
						</form>
					</div>
				</div>

				<div class="w-popcon flex hb vc" v-if="tab==2">
					<div class="w-leftimgbox">
						<div class="w-leftimg" ></div>
					</div>
					<div class="w-rightbox">
						<div class="w-logininput">
							<h3 class="w-welcome flex vc hc">
								<img src="../assets/img/index/finish.png" alt="" class="finishimg shrink0">
								<p>恭喜！注册成功！</p>
							</h3>
							<router-link to="/index" class="rebtn">点击进入</router-link>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { registered} from '@/api/login'
	export default {
	  data () {
	    return {
			tab: 1,
	      registeredUser: {}
	    }
	  },
	  methods: {
	    registered () {
	      registered(this.registeredUser).then(response => {
	        this.tab = 2
	      })
	    },
	  }
	}
</script>

<style scoped>
	.w-page {
		min-height: 100vh;
		width: 100vw;
		overflow: hidden;
	}

	.w-loginbox {
		width: 100%;
		height: calc(100vh - 136px);
		background-color: #DDC4A6;
		background-size: cover;
		background-position: center;
	}

	.w-width2 {
		width:60%;
		margin: 0 auto;
		padding-top: 50px;
		padding-bottom: 110px;
		box-sizing: border-box;
		height: 100%;
	}

	.w-con {
		background: #fff;
		/* height: 100%; */
		border-radius: 10px;
		overflow: hidden;
		width: 90%;
		margin: 0 auto;

	}

	.w-rightbox {
		padding: 46px 66px;
		padding-top: 0;
		box-sizing: border-box;
	}

	.w-welcome {
		text-align: center;
		padding: 20px 0;
		box-sizing: border-box;
		font-size: 24px;
		margin-bottom: 26px;
		color: rgba(255, 255, 255, 1);
		background: rgba(207, 169, 115, 1);
	}

	ul {
		width: 80%;
		margin: 0 auto;
	}

	li {
		margin-bottom: 26px;
		width: 100%;
		background: rgba(249, 249, 249, 1);
		/* background: red; */
		border-radius: 6px;
		padding-left: 27px;
		box-sizing: border-box;
	}

	.inputbox3 {
		width: 60%;
		margin: 0 auto;
	}

	.inputbox3 input {
		margin-top: 10px;
		outline: none;
		border: none;
		height: 46px;
	}

	.inputbox .inputbox2 {
		width: 100%;
	}

	.inputbox p,.inputbox2 p {
		font-size: 16px;
		color: rgba(102, 102, 102, 1);
		padding-bottom: 1px;
		width: 6vw;
	}

	.inputbox input {
		width: calc(100% - 160px);
		background: none;
		outline: none;
		border: none;
		height: 46px;
		padding-left: 10px;
		box-sizing: border-box;
		margin-left: 25px;
		display: block;
		font-size: 16px;
	}
	.inputbox2 .w-radiobox{
		width: calc(100% - 160px);
		height: 46px;
		padding-left: 10px;
		box-sizing: border-box;
		margin-left: 25px;
		display: block;
		font-size: 16px;
	}
	.inputbox2 .w-radiobox label{
		/* height: 46px;
		line-height: 46px; */
		margin-right: 20px;
	}
	.inputbox2 .w-radiobox label input{
		margin-right: 12px;
	}
	.inputbox2 .w-radiobox label span{
		display: inline-block;
		height: 46px;
		line-height: 50px;
	}
	input:focus {
		outline: none;
		border: none;
	}

	.rebtn {
		width: 100%;
		background: linear-gradient(90deg, rgba(214, 185, 143, 1), rgba(207, 169, 114, 1));
		border-radius: 10px;
		color: #fff;
		font-size: 18px;
		text-align: center;
		padding: 10px 0;
	}
	/* .................... */

	.w-popcon {
			background: #fff;
			/* height: 100%; */
			border-radius: 10px;
		}
	/* /////// */
		.w-popcon .w-leftimgbox {
			width: 55%;
			height: 100%;
			padding-left: 75px;
			box-sizing: border-box;
		}

		.w-popcon .w-leftimg {
			height: 100%;
			width: 100%;
			min-height: 20vw;
			box-sizing: border-box;
			display: block;
			background-image: url(../assets/img/index/login1.png);
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}
	/* /////////// */
		.w-popcon .w-rightbox {
			margin: 5vw auto;
			width: 45%;
			min-height: 20vw;
		}

		.w-popcon .w-welcome {
			font-size: 28px;
			font-weight: 600;
			color: rgba(255, 255, 255, 1);
			background: linear-gradient(-70deg, rgba(207, 169, 114, 1) 0%, rgba(235, 219, 194, 1) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-bottom: 30px;
		}

		.w-popcon .w-rightbox img {
			width: 18px;
			height: 26px;
			display: block;
			margin-right: 18px;
		}

		.w-popcon .inputbox {
			margin-bottom: 15px;
			padding: 19px 0;
			border-bottom: 1PX solid #ddd;
		}

		.w-popcon .w-logininput {
			width: 80%;
			padding-top: 5vw;
		}
		.w-popcon .w-rightbox .finishimg{
			width: 28px;
			height: 28px;
			display: block;
		}
		.w-popcon .rebtn {
			width: 70%;
			margin: 0 auto;
			background: linear-gradient(90deg, rgba(214, 185, 143, 1), rgba(207, 169, 114, 1));
			border-radius: 10px;
			color: #fff;
			font-size: 18px;
			font-weight: 400;
			outline: none;
			border: none;
			padding: 16px 0;
			line-height: 1;
			margin-top: 55px;
			display: block;
			text-align: center;
		}
</style>
